<template>
  <el-drawer
    title="会员开卡"
    :visible.sync="isShow"
    :before-close="closeDrawer"
    size="50%"
  >
    <!-- <div class="app-main-title">
      会员开卡
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div> -->
    <div>
      <el-form
        ref="form"
        class="doumee-form"
        :rules="rulers"
        :model="param"
        label-width="120px"
        label-suffix="："
        @submit.native.prevent
      >
        <el-form-item label="会员信息" prop="memberId">
          <div style="width: 520px">
            <MemberSearch ref="memberSearchRef" placeholder="请输入会员姓名/手机号/卡号" @clear="memberClear" @select="memberSelect" />
            <div v-if="memberInfo && memberInfo.nickName" class="member_info">
              <div class="item">姓名：{{ memberInfo.nickName }}</div>
              <div class="item">手机号：{{ memberInfo.phone }}</div>
              <div class="item">会员等级：{{ memberInfo.cardName }}</div>
              <div class="item">充值余额：<span>{{ memberInfo.rechargeMoney || 0 }}</span></div>
              <div class="item">赠送余额：<span>{{ memberInfo.giveMoney || 0 }}</span></div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="会员等级" prop="cardTypeId">
          <div class="cart_list">
            <div
              v-for="(item, index) in vipTypes"
              :key="index"
              :class="[index == vipType ? 'select-style' : 'normal-style']"
              class="card-style"
              @click="selectCard(index)"
            >
              <img :src="item.showAvatar" alt="">
              <div class="card-name">{{ item.cardName }}</div>
              <div class="secondColor">￥{{ item.price }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="zsmoney" label="赠送金额">
          <el-input
            v-model="param.giveMoney"
            :disabled="!zsmoney"
            placeholder="0.00"
            class="input-with-select w400"
            onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
          />
          <span class="ml10">元</span>
        </el-form-item>
        <el-form-item>
          <!-- v-if="meta.indexOf('VipAddPay') > -1" -->
          <el-button
            :loading="xdLoding"
            type="primary"
            @click="onSubmit()"
          >去支付</el-button>
          <el-button type="primary" @click="memberRegister">注册会员</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
      <orderDialog v-if="isShowOrderModal" ref="child" @cancelOrder="isShowOrderModal = false" @orderSuccess="orderSuccess" />
    </div>
  </el-drawer>
</template>

<script>
import store from '@/store'
import orderDialog from '@/components/order'
import {
  cardList,
  memberAdd,
  sendSMS,
  memberOrderInfo,
  configList
} from '@/api'
import MemberSearch from '@/components/MemberSearch'
export default {
  name: 'VipAdd',
  components: {
    orderDialog,
    MemberSearch
  },
  data() {
    return {
      isShowOrderModal: false,
      isShow: false,
      modalDialog: store.getters.dialog,
      memberInfo: {},
      payLoading: false,
      xdLoding: false,
      meta: [],
      authCode: '',
      swiperOptions: {
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination'
        }
      },
      dialogTableVisible: false,
      zsmoney: false,
      loding: false,
      codeBtnText: '获取验证码',
      time: 60,
      codeDsiabled: false,
      pwd: null,
      enSurePwd: null,
      firstQueryTime: '',
      vipType: 0,
      vipTypes: [],
      payMoney: '',
      lessMoney: 0.0,
      lastPrice: {},
      param: {
        nickName: null,
        phone: null,
        vcode: null,
        realName: null,
        entityNumber: null,
        sex: '0',
        identityNumber: null,
        payPw: null,
        enSurePwd: null,
        cardTypeId: null,
        venueId: sessionStorage.getItem('venueId')
      },
      orderInfo: {},
      cardInfo: {},
      rulers: {
        memberId: [{ required: true, message: '请输入会员姓名/手机号/卡号', trigger: 'change' }],
        cardTypeId: [{ required: true, message: '请选择会员等级', trigger: 'change' }]
      },
      faceimg: require('@/icons/png/default_faceid.png')
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getCardList()
    configList({ param: { type: '6' }})
      .then((res) => {
        if (res.errorCode !== '000000') return
        const list = res.recordList
        const objb = list.find(item => item.code === 'PRESENT_MONEY_CONFIG')
        if (objb && objb.name) {
          this.zsmoney = true
        }
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    goBack() {
      // this.$router.go(-1)
      this.isShow = false
    },
    orderSuccess() {
      this.isShow = false
      this.isShowOrderModal = false
      this.$emit('success')
    },
    memberRegister() {
      this.$emit('register', this.$refs.memberSearchRef.searchValue)
      this.isShow = false
      this.$emit('close')
    },
    closeDrawer() {
      this.isShow = false
      this.$emit('close')
    },
    memberSelect(item) {
      const fn = () => {
        this.memberInfo = item
        this.$set(this.param, 'memberId', item.id)
        // this.$refs.form.clearValidate()
      }
      fn()
      if (item.cardTypeId && item.cardTypeId !== '') {
        this.$message.warning('该用户已开卡')
      }
    },
    memberClear() {
      this.memberInfo = {}
    },
    getCode() {
      if (this.param.phone.length !== 11) {
        this.$message.error('请输入正确的手机号')
        return
      }
      sendSMS({ param: { phone: this.param.phone, type: '01' }})
        .then((res) => {
          if (res.errorCode === '000000') {
            setTimeout(() => {
              this.codeDsiabled = true
              this.codeBtnText = '(60)重新发送'
              this.time = 60
              const timeInterval = setInterval(() => {
                this.time--
                this.codeBtnText = '(' + this.time + ')' + '重新发送'
                if (this.time === 0) {
                  clearInterval(timeInterval)
                  this.codeBtnText = '重新发送'
                  this.codeDsiabled = false
                  console.log('结束')
                }
              }, 1000)
            }, 1000)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 获取卡类型列表
    getCardList() {
      cardList({
        pagination: {
          page: 1,
          rows: 1000
        },
        param: {}
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            res.recordList.forEach(item => {
              if (item.isnormal !== '1' && item.channel !== '1_0') {
                this.vipTypes.push(item)
              }
            })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    selectCard(index) {
      this.vipType = index
      this.$set(this.param, 'cardTypeId', this.vipTypes[index])
    },
    onSubmit() {
      if (this.vipType >= this.vipTypes.length) {
        this.$message.error('卡类型错误')
        return
      }
      this.param.cardTypeId = this.vipTypes[this.vipType].id
      this.param.memberId = this.memberInfo.id
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.xdLoding = true
          memberAdd({
            param: this.param
          })
            .then((res) => {
              this.xdLoding = false
              if (res.errorCode === '000000') {
                this.getOrderMessage(res.record)
              }
            })
            .catch((err) => {
              this.xdLoding = false
              console.log(err)
            })
        } else {
          return false
        }
      })
    },
    getOrderMessage(orderId) {
      memberOrderInfo({ param: { orderId }}).then((res) => {
        if (res.errorCode === '000000') {
          const obj = {
            ...res.record.orderInfo,
            cardName: res.record.cardInfo.cardName
          }
          this.isShowOrderModal = true
          this.$nextTick(() => {
            this.$refs.child.continuePay(obj, 'vipAdd', this.memberInfo)
          })
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
.member_info{
  display: flex;
  flex-wrap: wrap;
  background: #F7F7F7;
  border-radius: 2px;
  padding: 16px;
  margin-top: 10px;
  .item{
    width: 33.33%;
    line-height: 28px;
    height: 28px;
  }
}
.code-style {
  width: 70%;
}
.code-btn-style {
  margin-left: 20px;
}

.card-style {
  width: 158px;
  height: 160px;
  background: #FFFFFF;
  border-radius: 2px;
  border: 1px solid #D8D8D8;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 12px;
  line-height: 16px;
  cursor: pointer;
  img {
    width: 134px;
    height: 80px;
    display: flex;
    margin-bottom: 12px;
  }
  .card-name {
    color: #222;
    font-weight: 500;
    line-height: 18px;
    margin-bottom: 10px;
  }
}
.cart_list{
  display: flex;
  flex-wrap: wrap;
}
.select-style {
  border: solid 1px $primaryColor;
}
.base-message-style {
  width: 50%;
  display: inline-block;
  .base-value-style {
    font-size: 13px;
  }
  .card-name-style {
    display: inline-block;
    border: 1px #999 solid;
    border-radius: 4px;
    background-color: #fff;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    height: 20px;
    line-height: 20px;
    margin-top: 10px;
    padding-bottom: -15px;
    text-align: center;
  }
}

.btns-style {
  // width: 80%;
  margin-left: 10%;
}
.money-value-style {
  color: #dd0707;
  font-weight: 500;
}

.card-message {
  margin-top: 10px;
  background-color: #f2f2f2;
  height: 60px;
  line-height: 20px;
  .first-line {
    height: 30px;
    padding: 5px;
    .message-title-style {
      color: #999;
    }
    .card-name-style {
      display: inline-block;
      border: 1px #999 solid;
      border-radius: 4px;
      background-color: #fff;
      font-size: 12px;
      padding-left: 5px;
      padding-right: 5px;
      height: 20px;
      text-align: center;
    }
    .close-style {
      font-size: 20px;
      float: right;
      margin-right: 5px;
      margin-top: -2px;
      padding: 0;
      border: 0px #999 solid;
    }
    .message-value-style {
      margin-right: 15px;
      color: #222;
    }
  }
}
</style>
